<form class="send-form"
      name="$ctrl.send"
      novalidate>

    <ng-transclude></ng-transclude>

    <div class="row" ng-if="!$ctrl.isLira">
        <div ng-if="$ctrl.toBankMode && !$ctrl.isVerified && !$ctrl.isBankPendingOrError"
             class="plate-error">
            <div class="body-2 error-500 margin-05" w-i18n="modal.send.notVerifiedHeader"></div>
            <div class="footnote-1 basic-500" w-i18n="modal.send.notVerifiedText"></div>
        </div>
    </div>

    <div class="row margin-top-2">
        <div class="flex-row-title">
            <div class="body-2 margin-05" w-i18n="modal.send.recipient"></div>
            <div ng-if="$ctrl.hasSendToBank"
                 class="toggle-mode-container">
                <span class="link"
                      ng-click="$ctrl.toBankMode = !$ctrl.toBankMode"
                      ng-if="!$ctrl.toBankMode && !$ctrl.isLira"
                      w-i18n="modal.send.toBank"></span>
                <span class="link"
                      ng-click="$ctrl.toBankMode = !$ctrl.toBankMode"
                      ng-if="$ctrl.toBankMode"
                      w-i18n="modal.send.toWaves"></span>
            </div>
        </div>

        <div class="input-like big disabled" ng-if="$ctrl.toBankMode">
            <span w-i18n="modal.send.bankAccount" ng-if="!$ctrl.isLira"></span>
            <span w-i18n="modal.send.liraBankAccount" ng-if="$ctrl.isLira"></span>
        </div>

        <w-input-container ng-if="!$ctrl.toBankMode">
            <div class="read-address-wrap">
                <w-input type="text"
                         name="recipient"
                         ng-model="$ctrl.state.singleSend.recipient"
                         placeholder="modal.send.placeholderRecipient"
                         w-i18n-attr="placeholder"
                         w-validate
                         w-validator-any-address="{{$ctrl.state.assetId}}"
                         required></w-input>

                <w-qr-code-read on-read="$ctrl.onReadQrCode(text)" max-width="415"
                                max-height="310"></w-qr-code-read>
            </div>

            <w-input-error message="anyAddress">
                <span w-i18n="modal.send.errors.address"></span>
            </w-input-error>
            <w-input-error message="required">
                <span w-i18n="modal.send.errors.required"></span>
            </w-input-error>
        </w-input-container>
    </div>

    <div class="row relative" style="min-height: 60px;"
         ng-if="$ctrl.toBankMode && $ctrl.termsIsPending && !$ctrl.isLira && $ctrl.isBankAccepted">
        <w-loader class="asd"></w-loader>
    </div>

    <div ng-if="$ctrl.toBankMode && !$ctrl.isBankPendingOrError && $ctrl.isVerified && $ctrl.isGatewayAccepted" class="margin-1">
        <div class="plate-warning">
            <div class="body-2 warning-500 margin-05" w-i18n="modal.send.coinomatWarningHeader"></div>
            <div class="footnote-1 basic-500" w-i18n="modal.send.coinomatWarningText"></div>
        </div>
    </div>

    <div ng-if="$ctrl.toBankMode && !$ctrl.isBankPendingOrError && $ctrl.isVerified && $ctrl.isGatewayAccepted" class="row">
        <div class="plate-warning">
            <div class="body-2 warning-500 margin-05" w-i18n="modal.send.coinomatLimits"></div>
        </div>
    </div>

    <div ng-if="$ctrl.outerSendMode && !$ctrl.gatewayError" class="row">
        <div class="plate-warning margin-2">
            <div class="body-2 warning-500"
                 w-i18n="modal.send.coinomat.feeTitle"
                 params="{
                               fee: $ctrl.gatewayDetails.gatewayFee,
                               assetTicker: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.displayName
                             }"></div>
            <div class="footnote-1 basic-500"
                 w-i18n="modal.send.gateway.feeExplanation"
                 params="{
                               min: $ctrl.gatewayDetails.minimumAmount,
                               max: $ctrl.gatewayDetails.maximumAmount,
                               assetTicker: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.displayName,
                               assetName: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.name
                             }"></div>
        </div>

        <div class="plate-warning basic-500">
            <span w-i18n="modal.send.icoWarning"
                  params="{assetName: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.name}"></span>
        </div>
    </div>

    <div ng-if="$ctrl.outerSendMode && $ctrl.gatewayDetailsError || !$ctrl.isBankAccepted" class="row">
        <div class="plate-warning server-error">
            <div class="body-2 warning-500 margin-05"
                 w-i18n="modal.receive.gatewayError">
            </div>
        </div>
    </div>

    <div ng-if="$ctrl.outerSendMode && $ctrl.gatewayAddressError" class="row">
        <div class="plate-warning server-error">
            <div class="body-2 warning-500 margin-05"
                 w-i18n="modal.receive.serverAddressError">
            </div>
        </div>
    </div>

    <div ng-if="$ctrl.outerSendMode && $ctrl.gatewayWrongAddress" class="row">
        <div class="plate-warning server-error">
            <div class="body-2 warning-500 margin-05"
                 w-i18n="modal.receive.serverWrongAddress">
            </div>
        </div>
    </div>

    <div ng-if="$ctrl.outerSendMode && $ctrl.isMoneroNotIntegratedAddress() && !$ctrl.gatewayError">
        <div class="body-2 margin-05" w-i18n="modal.send.moneroPaymentId"></div>
        <w-input-container class="row">
            <div>
                <w-input type="text"
                         name="payment-id"
                         ng-model="$ctrl.state.paymentId"
                         placeholder="modal.send.moneroPaymentIdPlaceholder"
                         w-i18n-attr="placeholder"
                         ng-minlength="64"
                         ng-maxlength="64"
                         w-validate
                         w-validator-pattern="^[0-9a-fA-F]+$"
                         required></w-input>
            </div>

            <w-input-error message="minlength">
                <span w-i18n="modal.send.errors.paymentIdLength"></span>
            </w-input-error>
            <w-input-error message="maxlength">
                <span w-i18n="modal.send.errors.paymentIdLength"></span>
            </w-input-error>
            <w-input-error message="pattern">
                <span w-i18n="modal.send.errors.paymentIdPattern"></span>
            </w-input-error>
            <w-input-error message="required">
                <span w-i18n="modal.send.errors.required"></span>
            </w-input-error>
        </w-input-container>
    </div>

    <w-input-container ng-if="!$ctrl.hasOuterError && !$ctrl.isBankPending && $ctrl.isBankAccepted"
                       class="margin-top-2">
        <div class="body-2 margin-05" w-i18n="modal.send.amount"></div>
        <div class="amount-wrap" ng-class="{'no-mirror': $ctrl.noMirror}">

            <w-balance-input name="amount"
                             asset-id="$ctrl.state.assetId"
                             max-balance="$ctrl.maxAmount"
                             fee="$ctrl.feeList"
                             input-classes="big"
                             disabled="$ctrl.toBankMode && (!$ctrl.isVerified || !$ctrl.termsAccepted)"
                             min="$ctrl.minAmount"
                             on-focus="$ctrl.focus = 'amount'"
                             on-blur="$ctrl.focus = ''"
                             amount="$ctrl.state.singleSend.amount">
            </w-balance-input>
            <div class="amount-modal-icon"></div>
            <w-balance-input ng-if="!$ctrl.noMirror"
                             on-focus="$ctrl.focus = 'mirror'"
                             on-blur="$ctrl.onBlurMirror()"
                             name="amountMirror"
                             asset-id="$ctrl.mirrorId"
                             fill-max="$ctrl.fillMax()"
                             fee="$ctrl.tx.fee"
                             input-classes="big"
                             disabled="$ctrl.toBankMode && (!$ctrl.isVerified || !$ctrl.termsAccepted)"
                             amount="$ctrl.mirror">
            </w-balance-input>

        </div>

        <div class="like-input-error multiline "
             ng-if="$ctrl.send.amount.$touched && $ctrl.send.amount.$invalid && $ctrl.focus !== 'amount'">
            <div class="error">
            <span ng-if="$ctrl.send.amount.$error.required"
                  class="error-list-row"
                  w-i18n="inputs.errors.required"></span>
                <span ng-if="$ctrl.send.amount.$error.gt && $ctrl.tx.amount.getTokens().eq(0)"
                      class="error-list-row"
                      w-i18n="inputs.errors.required"></span>
                <span ng-if="$ctrl.send.amount.$error.gt && $ctrl.tx.amount.getTokens().gt(0)"
                      class="error-list-row"
                      w-i18n="inputs.errors.gtGatewayMin"
                      params="{min: $ctrl.minimumAmount, assetName: $ctrl.tx.amount.asset.displayName}"></span>
                <span ng-if="$ctrl.send.amount.$error.precision"
                      class="error-list-row"
                      w-i18n="modal.send.errors.precision"
                      params="{precision: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.precision}"></span>
                <span ng-if="$ctrl.send.amount.$error.lte && !$ctrl.tx.amount.getTokens().gte($ctrl.gatewayDetails.maximumAmount)"
                      class="error-list-row"
                      w-i18n="modal.send.errors.max"></span>
                <span ng-if="$ctrl.send.amount.$error.lte && $ctrl.tx.amount.getTokens().gte($ctrl.gatewayDetails.maximumAmount)"
                      params="{money: $ctrl.maxGatewayAmount}"
                      class="error-list-row"
                      w-i18n="modal.send.errors.maxCoinomat"></span>
            </div>
        </div>
    </w-input-container>

    <w-input-container ng-if="$ctrl.toBankMode && !$ctrl.isBankPendingOrError"
                       class="margin-top-2">
        <div class="body-2 margin-05">
            <span w-i18n="modal.send.idNumberTitle"></span>
            <w-help-icon>
                <div w-i18n="modal.send.idNumber.helpIcon.title"
                     class="help-icon__row headline-3"></div>
                <div w-i18n="modal.send.idNumber.helpIcon.description"
                     class="help-icon__row"></div>
            </w-help-icon>
        </div>
        <w-input required
                 w-validate
                 ng-disabled="!$ctrl.termsAccepted"
                 w-validator-pattern="\d*"
                 ng-model="$ctrl.state.singleSend.attachment"
                 name="id-number"
                 type="text"></w-input>
        <w-input-error name="idNumber" message="required">
            <span w-i18n="inputs.errors.required"></span>
        </w-input-error>
    </w-input-container>

    <div ng-if="!$ctrl.outerSendMode && !$ctrl.toBankMode && !$ctrl.hasOuterError"
         class="margin-top-2">
        <div class="body-2 margin-05" w-i18n="modal.send.description"></div>
        <w-input-container>
            <w-input textarea="true"
                     name="attachment"
                     ng-model="$ctrl.state.singleSend.attachment"
                     w-i18n-attr="placeholder"
                     w-validate
                     w-validator-byte-lte="140"
                     placeholder="modal.send.descriptionPlaceholder"></w-input>

            <w-input-error message="byteLte">
                <span w-i18n="modal.send.attachmentLength"></span>
            </w-input-error>
        </w-input-container>
    </div>

    <div class="fee margin-top-1 margin-1" ng-if="!$ctrl.hasOuterError && !$ctrl.isBankPending && $ctrl.isBankAccepted">
        <w-fee-list tx="$ctrl.wavesTx"
                    disabled="$ctrl.toBankMode && (!$ctrl.isVerified || !$ctrl.termsAccepted)"
                    balance-hash="$ctrl.state.moneyHash"
                    fee="$ctrl.tx.fee"></w-fee-list>
    </div>

    <div class="commission-error margin-top-1 margin-2 footnote error-500"
         ng-if="!$ctrl.hasComission && !$ctrl.gatewayError">
        <span w-i18n="modal.send.validationError.notEnoughFundsWithdraw"
              ng-show="$ctrl.outerSendMode"
              params="{
                fee: $ctrl.state.singleSend.fee,
                getawayFee: $ctrl.gatewayDetails.gatewayFee,
                currency: $ctrl.state.moneyHash[$ctrl.state.assetId].asset.displayName,
                minGatewayAmount: $ctrl.gatewayDetails.minimumAmount
              }"></span>
        <span w-i18n="modal.send.validationError.notEnoughFunds"
              ng-hide="$ctrl.outerSendMode"
              params="{fee: $ctrl.state.singleSend.fee}"></span>
    </div>

    <div ng-if="$ctrl.toBankMode && !$ctrl.isLira && $ctrl.isBankAccepted" class="margin-top-2">
        <w-coinomat-terms force-show-terms="::false"
                          terms-pending="$ctrl.termsIsPending"
                          load-error="$ctrl.termsLoadError"
                          show-accepted-checkbox="::false"
                          is-verified="$ctrl.isVerified"
                          terms-accepted="$ctrl.termsAccepted"
                          on-sign-start="$ctrl.onSignCoinomatStart()"
                          on-sign-end="$ctrl.onSignCoinomatEnd()"></w-coinomat-terms>
    </div>

    <div ng-if="$ctrl.toBankMode && $ctrl.isLira" class="margin-top-2">
        <div class="plate-warning margin-2">
            <div class="body-2 warning-500 margin-05" w-i18n="modal.receive.wtryPlate1Header"></div>
            <div class="footnote-1 basic-500" w-i18n="modal.receive.wtryPlate1Text"></div>
        </div>

        <div class="row margin-3 caption-1 info-block">
            <i class="icon-info"></i>
            <div w-i18n="modal.receive.wtry.info"></div>
        </div>
    </div>

    <div class="margin-top-3">
        <a href="{{$ctrl.digiLiraUserLink}}"
           target="_blank" rel="noopener noreferrer"
           ng-if="$ctrl.toBankMode && $ctrl.isLira"
           class="fake-button long margin-4">
            <span class="fake-button-content big submit long" w-i18n="button.continue"></span>
        </a>

        <w-sign-button
                ng-if="!$ctrl.hasOuterError && !$ctrl.isBankPending && !($ctrl.toBankMode && $ctrl.isLira)"
                on-click="$ctrl.createTx()"
                on-success="$ctrl.onSignTx(signable)"
                disabled="$ctrl.send.$invalid || (!$ctrl.send.$invalid && !$ctrl.hasComission) || ($ctrl.toBankMode && !$ctrl.termsAccepted)">
            <span w-i18n="button.continue"></span>
        </w-sign-button>
    </div>
</form>
